<template>
  <div class="tags-box">
    <div class="tag-list">
      <span
        class="tag-box"
        @click="goTop('target' + item.id)"
        v-for="item in tags"
      >
        <!-- <a :href="`#target${item.id}`">#{{ item.name }}</a> -->
        #{{ item.name }}
      </span>
    </div>
    <div class="classify-blog">
      <div v-for="item in allTags">
        <div class="tagsName" :id="`target${item.id}`">#{{ item.name }}</div>
        <div
          class="blogTitle"
          @click="showContent(d.id)"
          v-for="d in item.blogArr"
        >
          {{ d.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BlogTags',
  data() {
    return {
      tags: [],
      allTags: [],
    }
  },

  mounted() {
    this.getAllTags()
    this.classifyTags().then(val=>{
    let tagId = this.$route.params.id
     if (tagId) {
      this.$nextTick(()=>{
        this.goTop(`target${tagId}`)
      })
    }
    })
  },
  // 进入组件之前进行触发】
  // beforeRouteEnter(from, to,next){
  //     console.log('进入组件之前进行触发')
  //    不能获取组件的实例
  //     next()
  // },
  // beforeRouteLeave(to,from,next) {
  //   console.log(to)
  //   console.log(this.tags)
  //   next()
  // },
  methods: {
    // 所有的tags
    getAllTags() {
       this.$axios.get('/getTags').then((data) => {
        if (data.status === 200) {
          this.tags = data.data
        }
      })
    },
    // 所有的分类查询
    classifyTags() {
     return  this.$axios.get(`/classifyTags`).then((data) => {
        if (data.status === 200) {
          this.allTags = data.data
        }
      })
    },
    // 查看博客详情
    showContent(id) {
      this.$router.push({
        path: '/home/blogContent',
        query: {
          id: id,
        },
      })
    },
    // 跳转指定位置
    goTop(position) {
      // 可以用来解决锚链接 和 hash 路由冲突的问题
      document.querySelector(`#${position}`).scrollIntoView(true)
    },
  },
}
</script>

<style scoped lang="less">
.tags-box {
  .tag-list {
    font-size: 18px;
    margin-bottom: 50px;
  }
  .tag-box {
    cursor: pointer;
    display: inline-block;
    margin-right: 20px;
  }

  .tagsName {
    color: #000;
    font-size: 18px;
  }
  .blogTitle {
    font-size: 16px;
    margin-left: 80px;
  }
  .blogTitle:hover {
    color: #000;
    cursor: pointer;
  }
}
</style>
